﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>普通监听</title>
    <meta charset="utf-8" />
    <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="Controller" class="container-fluid">
    <div class="form-group">
        <input type="text" placeholder="Id" id="Id" ng-model="Id"/> 
        <input type="text" placeholder="Name" id="Name" ng-model="Name"/> 
    </div>
    <div class="form-group">
        <button type="button" class="btn btn-primary" ng-click="addRow()">Add Row</button><button type="button" class="btn btn-danger" ng-click="removeRow()">Remove Row</button>
        <table id="tbl" class="table table-striped table-bordered table-responsive">
            <thead><tr><th>Id</th><th>Name</th></tr></thead>
            <tbody>
                <tr ng-repeat="r in rows"><td><input type="text" ng-model="r.Id" /></td>
                <td><input type="text" ng-model="r.Name" /></td></tr>
            </tbody>
        </table>
    </div>
    <script type="text/javascript">

        function Controller($scope, $sce) {
            $scope.rows = [];
            $scope.Id = "";
            var families=["Zhang","Li","Wang","Xu","Deng"],names=["One","Two","Three","Four","Five","Six","Seven","Eight"]
            $scope.Name = "";
            var id = 0;
            var that = parent.angular.element(document)
                    .find("body").scope();
            function buildPerson() {
                $scope.Id = (++id).toString();
                var index1 = new Date().valueOf() & (names.length-1) ;
                var index2 = (index1 ^ id) % families.length;
                $scope.Name = [families[index2], ".", names[index1]].join("");
            };
            buildPerson();
            $scope.$watch("rows", function () {
                //必须使用element(document)去查找元素，直接使用element("body")，不管是否引用jQuery都会报错
                
                if (that != null) {
                    var a = $.extend(true, [], $scope.rows);;
                    for (var i = 0; i < a.length; i++) {
                        var it = a[i];
                        delete it.$$hashKey;
                    }
                    that.InputArray = a;
                    that.InputValue = "";
                    that.$apply();
                };
            },true);//要监听到数组rows内每个对象的属性值变化，则需要设置true
            $scope.addRow = function () {
                $scope.rows.push({
                    Id: $scope.Id
                    , Name: $scope.Name
                });
                buildPerson();
            };
            $scope.removeRow = function () {
                Array.prototype.pop.call($scope.rows);
            };
        };

        var myApp = angular.module("myApp", []);
        myApp.controller("Controller", Controller);
    </script>
</body>
</html>
